<template>
  <div class="readBookContent" @click="showNav">
    <!-- 在线阅读导航栏 -->
    <read-book-top v-show="navFlag" style="width: 100%;" />

    <!-- 书籍内容 -->
    <div class="p-4 books" id="books">
      <div class="d-flex justify-content-center align-items-center booksCover">
        <h2>{{booksName}}</h2>
      </div>
      {{this.$store.state.readBooks}}
    </div>
    <!-- 在线阅读底部 -->
    <div class="pe text-white p-2" v-show="navFlag">
      <div class="fonts d-flex">
        <div class="mr-4">字体</div>
        <div class="d-flex align-items-center">
          <div class="add content text-center" id="add">A+</div>
          <div class="num mx-4">{{size}}px</div>
          <div class="sub content text-center" id="sub">A-</div>
        </div>
      </div>
      <div class="bgColors d-flex mt-3 mb-2">
        <div class="mr-4">背景</div>
        <div class="d-flex justify-content-between" style="width: 300px;">
          <div class="bgItems" style="background-color: #FFF; color: #333"></div>
          <div class="bgItems" style="background-color: rgb(235, 210, 180); color: #333"></div>
          <div class="bgItems" style="background-color: rgb(226, 217, 207); color: #333"></div>
          <div class="bgItems" style="background-color: rgb(43, 34, 25); color: rgb(160,160,160)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ReadBookTop from './ReadBookTop.vue'
  // import LocalStorage from 'components/LocalStorage/LocalStorage.vue'

  export default {
    name: 'ReadBookContent',
    components: {
      ReadBookTop,
      // LocalStorage
    },
    data () {
      return {
        navFlag: true,
        boxHeight: '',
        booksName: localStorage.getItem('onlineBooks'),
        size: Number(JSON.parse(localStorage.getItem('onlineReadStyle')).size),
        nowSize: ''
      }
    },
    methods: {
      // 点击屏幕显示导航栏
      showNav() {
        this.navFlag = true;
      },
      // 改变字体大小
      changeSize() {
        $('#books').css('fontSize', Number(this.nowSize) + 'px');
        localStorage.setItem('onlineReadStyle', JSON.stringify({
          size: Number(this.nowSize),
          color: $('#books')[0].style.color,
          bgColor: $('#books')[0].style.backgroundColor
        }))
      }
    },
    mounted() {
      //进入时将滚动条放置在书签保存位置
      if (document.body.scrollTop == 0) {
        document.documentElement.scrollTop = Number(localStorage.getItem('nowScroll'));
      } 
      if (document.documentElement.scrollTop == 0) {
        document.body.scrollTop =  Number(localStorage.getItem('nowScroll'));
      }
      // 当滚轮发生改变的时候执行，隐藏导航栏
      window.addEventListener('scroll', () => {
        this.navFlag = false;

      })
      // 在进入页面时，删除模态框。
      $('body').removeClass('modal-open');
      $('div').remove(".modal-backdrop");

      // 因为这里用的普通函数的this指向是调用自身的对象，而箭头函数的this指向则是当前的执行上下文，
      // 所以想要在普通函数内部调用箭头函数的指向时，需要从新在外部拿到执行上下文的当前作用域的this。
      let vm = this;
      // 点击底部按钮改变样式
      for (let i = 0; i < $('.bgItems').length; i++) {
        $('.bgItems')[i].addEventListener('click', function() {
          $('#books').css('color', this.style.color);
          $('#books').css('backgroundColor', this.style.backgroundColor);

          localStorage.setItem('onlineReadStyle', JSON.stringify({
            size: vm.size,
            color: this.style.color,
            bgColor: this.style.backgroundColor
          }))

        })
      }
      // 读取本地在线书籍的样式
      $('#books').css('fontSize', JSON.parse(localStorage.getItem('onlineReadStyle')).size + 'px');
      $('#books').css('color', JSON.parse(localStorage.getItem('onlineReadStyle')).color);
      $('#books').css('backgroundColor', JSON.parse(localStorage.getItem('onlineReadStyle')).bgColor);

      //增加字体大小
      $('#add')[0].addEventListener('click', () => {
        this.nowSize = Number(++this.size) ;
        this.changeSize();
      })

      //减少字体大小
      $('#sub')[0].addEventListener('click', () => {
        this.nowSize = Number(--this.size) ;
        this.changeSize();
      })
    }
  }
</script>

<style scoped>
  .books {
    width: 100%;
    background-color: rgb(235, 210, 180);
    color: #333;
    word-wrap: break-word;
    white-space: pre-wrap;
    /* font-size: 20px; */
  }
  .booksCover {
    width: 100%;
    height: 100vh;
    font-size: 1.5em;
  }
  .pe {
    width: 100%;
    background-color: #333;
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .content {
    width: 100px;
    height: 30px;
    color: rgb(139, 84, 0);
    background-color: rgb(221, 207, 194);
    border-radius: 20px
  }
  .bgItems {
    width: 45px;
    height: 30px;
    border-radius: 20px;
  }
</style>